<template>
  <page-header-wrapper
    :title="false"
  >
    <div class="page_list">
      <a-row>
        <a-col :span="4">
          <s-tree
            :dataSource="userList"
            :openKeys.sync="openKeys"
            :search="false"
            :checkedKeys="openKeys"
            @click="handleClick"
            @addClick="addClick"
          ></s-tree>
        </a-col>
        <a-col :span="18" style="padding-left: 20px;padding-top: 10px">
          <div>
            <a-empty v-if="key === 0" description="请先选择左侧部门" />
          </div>
          <div v-if="key !== 0">
            <div class="head_left_menu">
              <a-button @click="handleEdit">编辑</a-button>
              <a-button type="danger" @click="deleteDepartment">删除</a-button>
            </div>
            <a-descriptions title="部门信息" :column="2">
              <a-descriptions-item label="部门姓名">
                {{ department.name }}
              </a-descriptions-item>
              <a-descriptions-item label="部门备注">
                {{ department.describe }}
              </a-descriptions-item>
              <a-descriptions-item label="状态">
                <a-badge :status="department.status ? 'error' : 'success'" :text="department.status ? '关闭' : '正常'" />
              </a-descriptions-item>
              <a-descriptions-item label="创建时间">
                {{ department.addTime }}
              </a-descriptions-item>
              <a-descriptions-item label="更新时间">
                {{ department.updateTime }}
              </a-descriptions-item>
            </a-descriptions>

          </div>
        </a-col>
      </a-row>
    </div>
    <edit-panle
      ref="editModel"
      :visible="editVisible"
      :model="panleMode"
      :formData="panleData"
      @cancel="panleCanle"
    >
    </edit-panle>
  </page-header-wrapper>
</template>

<script>
import STree from '@/components/Tree/Tree'
import { getDepartmentList, delDepartment } from '@/api/department'
import editPanle from '@/views/systerm/userComponents/editPanle'

const userList = [
  {
    icon: 'apartment',
    key: 'key-01',
    title: '系统级别',
    children: [
      {
        key: 'key-01-00',
        title: '部门岗位',
        group: true,
        children: []
      }
    ]
  }
]
export default {
  name: 'Meua',
  components: {
    editPanle,
    STree
  },
  data () {
   return {
     key: 0,
     department: {
       name: '无',
       describe: '无',
       status: 1,
       addTime: '',
       updateTime: ''
     },
     panleMode: 0,
     editVisible: false,
     panleData: {},
     userList,
     openKeys: ['key-01']
   }
  },
  activated () {
    this.getDepartmentList()
  },
  methods: {
    getDepartmentList () {
      getDepartmentList({
        page: 1,
        pageSize: 20
      }).then(res => {
        if (res.code === 200) {
          const list = []
          if (res.data.list.length) {
            res.data.list.map(item => {
              let items = {}
              items = {
                title: item.name,
                key: item.id
              }
              list.push(items)
            })
          }
          this.userList[0].children[0].children = list
        }
      })
    },
    handleClick (e) {
      getDepartmentList({
        page: 1,
        pageSize: 999,
        id: e.key,
        fold: true
      }).then(res => {
        if (res.code === 200) {
          this.department = res.data.list[0]
        }
        this.key = e.key
      })
    },
    deleteDepartment () {
      const t = this
      const idList = []
      idList.push(t.key)
      this.$confirm({
        title: '你确定要删除吗？',
        content: '如果这个部门也会一并删除部门下面的子部门',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          delDepartment({
            idList: idList
            }).then(res => {
            if (res.code === 200) {
              t.$message.success('删除成功')
              t.key = 0
            } else {
              t.$message.error('删除失败')
            }
          })
        }
      })
    },
    panleCanle () {
      this.getDepartmentList()
      this.editVisible = false
      this.key = 0
    },
    handleEdit () {
      this.panleMode = 1
      this.editVisible = true
      this.$refs.editModel.setData(this.department)
    },
    addClick () {
      this.panleMode = 0
      this.editVisible = true
      this.panleData = {}
    }
  }
}
</script>

<style lang='less' scoped>
.page_head{
  width: 100%;
  height: 90px;
  border-radius: 10px;
  background-color: #fff;
  padding: 10px 20px;
  .head_title{
    font-size: 24px;
    color: #000;
  }
  .head_dot{
   border-left: 2px solid #736EFE;
    padding: 0 20px;
    margin-top: 10px;
  }
}
.page_list{
  width: 100%;
  margin-top: 10px;
  height: 80vh;
  background-color: #fff;
}
.user_title{
  margin: 10px;
}
</style>
